<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>表单验证</title>
<script language="JavaScript" type="text/javascript">
function checkForm(){
 var a=document.form1.textfield;
 var b=document.form1.textfield2;
 var c=document.form1.textfield3;
 var d=document.form1.textfield4;
 if(a.value==""){
  alert("请输入用户名！");
  a.focus();
  return false;
 }else if(a.value.length<6){
  alert("输入不少于6位的用户名！");
  a.focus();
  return false;
 }else if(b.value==""){
  alert("请输入邮箱！");
  b.focus();
  return false;
 }else if(b.value.indexOf('@',0)==-1 || b.value.indexOf('.',1)==-1){
  alert("邮箱必须包含@和.符号！");
  b.focus();
  return false;
 }else if(c.value==""){
  alert("请输入密码！");
  c.focus();
  return false;
 }else if(c.value.length<6){
  alert("密码不少于6位！");
  c.focus();
  return false;
 }else if(c.value!=d.value){
  alert("两次密码输入不一致");
  d.focus();
  return false;
 }
 return true;
}

function formname(){
 var diva=document.getElementById("div1");
 diva.innerHTML="";
 var name=document.form1.textfield.value;
 if(name.length==0){
 diva.innerHTML="<font color='red'>用户名不能为空！～～</font>"
 }else if(name.length<6){
 diva.innerHTML="<font color='red'>长度为6位！～～</font>"
 return;
 }
}

function formemail(){
 var divb=document.getElementById("div2");
 divb.innerHTML="";
 var email=document.form1.textfield2.value;
 if(email==""){
 divb.innerHTML="<font color='red'>邮箱不能为空！～～</font>"
 }
 else if(email.indexOf('@',0)==-1 || email.indexOf('.',1)==-1){
 divb.innerHTML="<font color='red'>邮箱必须包含@和.符号！～～</font>"
 return;
 }
}

function formpwd(){
 var divc=document.getElementById("div3");
 divc.innerHTML="";
 var pwd=document.form1.textfield3.value;
 if(pwd==""){
 divc.innerHTML="<font color='red'>请输入密码！～～</font>"
 }
 else if(pwd.length<6){
 divc.innerHTML="<font color='red'>请输入6位密码！～～</font>"
 return;
 }
}

function formpwds(){
 var divd=document.getElementById("div4");
 divd.innerHTML="";
 var pwd=document.form1.textfield3.value;
 var pwds=document.form1.textfield4.value;
 if(pwds==""){
 divd.innerHTML="<font color='red'>请输入密码！～～</font>"
 }
 else if(pwd!=pwds){
 divd.innerHTML="<font color='red'>密码不一致！～～</font>"
 }
 return;
}
</script>
<style type="text/css">
<!--
.STYLE1 {color: #FF0000}
body,td,th {
 font-size: 12px;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body>
<form id="form1" name="form1" method="post" action="" onsubmit="return checkForm()" >
  <table width="291" border="1" cellspacing="0">
    <tr>
      <td width="168"><input type="text" name="textfield" onBlur="formname()" /></td>
      <td width="107"><div class="STYLE1" id="div1">至少6位字母</div></td>
    </tr>
    <tr>
      <td><input type="text" name="textfield2" onBlur="formemail()" /></td>
      <td><div class="STYLE1" id="div2">输入E-Mail</div></td>
    </tr>
    <tr>
      <td><input type="text" name="textfield3" onblur="formpwd()" /></td>
      <td><div class="STYLE1" id="div3">密码长度至少6位</div></td>
    </tr>
    <tr>
      <td><input type="text" name="textfield4" onBlur="formpwds()" /></td>
      <td><div class="STYLE1" id="div4">确认密码</div></td>
    </tr>
  </table>
  <input type="submit" name="Submit" value=" 确  定 "/>
</form>
</body>
</html>